<template>
	<u-popup type="bottom" :show="show" :round="20" :z-index="9999">
		<view class="popup-content">
			<view class="row-container">
				<view class="row">
					<view class="row_item">关注区域</view>
					<up-radio-group v-model="radiovalue1" placement="column" @change="groupChange" iconPlacement="right"
						shape="circle">
						<up-radio class="option-text" shape="circle" :customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in areaList" :key="index" :label="item ==''?'不限':item" :name="item">
						</up-radio>
					</up-radio-group>
					<!-- <view v-for="(area, index) in areaList" :key="index">
						<view class="option-text">{{ area }}</view>
						<label>
							<checkbox :value="area" /><text></text>
						</label>
					</view> -->
				</view>
				<view class="row">
					<view class="row_item">关注板块</view>
					<scroll-view scroll-y style="height: 200px;">
						<up-radio-group v-model="radiovalue2" placement="column" @change="groupChange2" iconPlacement="right"
							shape="circle">
							<up-radio class="option-text" shape="circle" :customStyle="{marginBottom: '8px'}"
								v-for="(item, index) in areaTwoList" :key="index" :label="item ==''?'不限':item" :name="item">
							</up-radio>
						</up-radio-group>
					</scroll-view>

				</view>
			</view>
			<view class="button-container">
				<button class="btn1" @click="pickerCancel1">清空</button>
				<button class="btn2" @click="pickerConfirm1">确定</button>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const props = defineProps({
		show: {
			type: Boolean,
			default: false
		}
	})
	const emits = defineEmits(['update:show', 'select'])
	const radiovalue1 = ref('');
	const radiovalue2 = ref('');
	const areaList = ref(['', '花果园区'])
	const areaTwoList = ref([
		'',
		"A区",
		"B区",
		"C区",
		"D区",
		"E区",
		"F区",
		"G区",
		"H区",
		"I区",
		"J区",
		"K区",
		"L区",
		"M区",
		"N区",
		"O区",
		"P区",
		"Q区",
		"R区",
		"S区",
		"T区",
		"U区",
		"V区",
		"W区",
		"X区",
		"Y区",
		"Z区"
	])
	const groupChange = (n) => {
		radiovalue1.value = n
		console.log('groupChange', n);
	};
	const groupChange2 = (n) => {
		radiovalue2.value = n
		console.log('groupChange', n);
	};
	const pickerCancel1 = () => {
		emits('select', {
			region: '',
			sector: ''
		})
		emits('update:show', false)
	}
	const pickerConfirm1 = () => {
		emits('select', {
			region: radiovalue1.value,
			sector: radiovalue2.value
		})
		emits('update:show', false)
	}
</script>

<style lang="scss" scoped>
	.popup-content {
		display: flex;
		flex-direction: column;
		width: 686rpx;
		height: 500rpx;
		gap: 40rpx;
		padding: 40rpx 32rpx 60rpx 32rpx;
		border-top-right-radius: 29rpx;
		border-top-left-radius: 29rpx;
		background-color: rgba(255, 255, 255, 1);

		.row-container {
			display: flex;

			.row {
				text-align: center;
				width: 750rpx;
				height: 360rpx;
				gap: 155rpx;
				font-size: 30rpx;

				&+.row {
					padding-left: 20rpx;
				}

				.row_item {
					margin-bottom: 32rpx;
				}

				.option-text {
					width: 300rpx;
					padding-left: 10px;
					gap: 31rpx;
					border-left: 1rpx solid rgba(79, 129, 240, 1);
				}

				.option {
					display: flex;
					justify-content: space-between;
					width: 310rpx;
					height: 39rpx;
					padding: 25rpx 24rpx 25rpx 10rpx;



					input {
						width: 23rpx;
						height: 20rpx;
						border: 1rpx solid rgba(0, 0, 0, 1);
					}
				}

				.optionitem {
					background-color: rgba(247, 247, 247, 1);
				}
			}
		}

		.button-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 686rpx;
			height: 78rpx;
			margin-top: 60rpx;
			gap: 60rpx;

			button {
				width: 313rpx;
				height: 78rpx;
				gap: 10rpx;
				font-size: 28rpx;
				border-radius: 100rpx;
				border: 2rpx solid rgba(79, 129, 240, 1);
				padding: 9rpx 20rpx;
			}

			.btn1 {
				background-color: rgba(79, 129, 240, 0.1);
				color: rgba(79, 129, 240, 1);

			}

			.btn2 {
				color: rgba(255, 255, 255, 1);
				background-color: rgba(79, 129, 240, 1);
			}
		}

		.priceInput {
			display: flex;
			gap: 30rpx;
			padding: 0 30rpx;
		}

		.priceItem {
			text-align: center;
		}
	}
</style>